//函数式组件使用 state
import {useState, useEffect} from 'react';

export default () => {
    // state 状态
    // const [isNight, setNight] = useState(初始值);
    //isNight 是状态值, setNight 是修改 isNight 的一个函数
    const [isNight, setNight] = useState(false);
    const [count, setCount] = useState(0);

    //点击改变白天与黑夜的函数  
    function change(){
        //修改状态. 修改状态, 组件就会重新渲染
        setNight(!isNight);
    }

    function add(){
        setCount(count + 1);
    }

    //该代码用来代替实现 类式组件中 componentDidMount 与 componentDidUpdate 声明周期回调
    useEffect(() => {
        console.log('OK');
    });

    return <div>
            {isNight ? '晚上': '白天'}   
            <button onClick={change}>点击切换</button> 

            <h2>{count}</h2>
            <button onClick={add}>增加</button>
        </div>;
}
